<template>
	<view class="page">
		<!-- 地址 、搜索框 -->
		<block v-if="hasLogin">
			<view class="search-box-wrapper p10">
				<view class="input-box" @click="goSearch">
					<image class="search-icon" src="https://www.innovationgloble.com/wxs/img/wx/kcxcx/img/export/search.png" />
					<view class="uni-input">搜索联系人</view>
				</view>
			</view>
			<!-- 系统通知 所有评论 -->
			<view class="other-message">
				<view class="option-area-item" @click="goNotify">
					<view class="option-area-item-title">
						<image class="icon" src="https://www.innovationgloble.com/wxs/img/wx/tongzhi.png" />
						系统通知
					</view>
					<view style="color: #9B9B9B;font-size: 26upx;" class="icon iconfont iconright1"></view>
					<view class="red_circle" v-if="sysNum!=0">{{sysNum}}</view>
					<view class="line" />
				</view>

				<view class="option-area-item" @click="toAllCommentsList">
					<view class="option-area-item-title ">
						<image class="icon" src="https://www.innovationgloble.com/wxs/img/wx/pinglun.png" />
						所有评论
					</view>
					<view style="color: #9B9B9B;font-size: 26upx;" class="icon iconfont iconright1"></view>
					<view class="red_circle" v-if="commitNum!=0">{{commitNum}}</view>
					<view class="line" />
				</view>

				<view class="option-area-item" @click="goAsk">
					<view class="option-area-item-title">
						<image class="icon" src="https://www.innovationgloble.com/wxs/img/wx/fufei.png" />
						付费咨询
					</view>
					<view style="color: #9B9B9B;font-size: 26upx;" class="icon iconfont iconright1"></view>
					<view class="line" />
				</view>

				<view class="option-area-item" @click="goContactList">
					<view class="option-area-item-title">
						<image class="icon" src="https://www.innovationgloble.com/wxs/img/wx/tongxunlu.png" />
						通讯录
					</view>
					<view style="color: #9B9B9B;font-size: 26upx;" class="icon iconfont iconright1"></view>
				</view>
			</view>
			<view class="sepline">
			</view>

			<block>
				<view v-if="histChatList.length===0" class="invite-no-data">
					<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/icon/wuyaoqing.png"></image>
					<view class="no-data-text">暂无聊天对话记录</view>
				</view>
				<uni-swipe-action v-else>
					<uni-swipe-action-item v-for="(item, index) in histChatList" :key="index" :options="options" @click="actionClick(item)"
					 @change="change">
						<view class="chat-item" @click="goChat(item)">
							<image class="avatar" :src="item.accountHead" mode="aspectFill" />
							<view class="user-info">
								<view class="name-box">
									<view class="name">{{item.realName || item.phoneNumber}}</view>
									<view v-if="item.identity" class="identity">
										{{handleComma(item.identity)}}
									</view>
									<view class="time">
										{{chatTime(item.imMessage.sendTime)}}
									</view>
								</view>
								<view class="content">
									<view class="content-text">
										{{displayLastMsg(item.imMessage.content)}}
									</view>
									<view class="un-read-num" v-if="item.imMessage.unReadNum">
										{{item.imMessage.unReadNum}}
									</view>
								</view>
								<!-- 相互关注  回关 -->

								<!-- <view v-show="showTips(item)" class="red_circle"></view> -->
							</view>
							<view class="bot-line" />
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</block>
		</block>

		<block v-else>
			<view class="nodata">
				<image class="img" src="https://www.innovationgloble.com/wxs/img/wx/weidenglu.png" />
				<view class="tip" v-if="isLine">
					您还没有登录，请登录后查看消息
				</view>
				<view class="btn" v-if="isLine" @click="goLogin">
					登录
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		chat_time
	} from '@/utils/time.js';

	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex';
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue';
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue';
	import { permissionJudge } from "@/utils/authority.js" //权限信息校验
	export default {
		components: {
			uniSwipeAction,
			uniSwipeActionItem
		},
		data() {
			return {
				options: [{
					text: '添加通讯录',
					style: {
						backgroundColor: '#2a7dfa'
					}
				}],
				unReadNum: 1,
				quickEnters: [{
					title: '付费咨询',
					icon: 'https://www.innovationgloble.com/wxs/img/wx/ask.png',
					page: '/pagesA/message/ask'
				}, {
					title: '评论',
					icon: 'https://www.innovationgloble.com/wxs/img/wx/coment.png',
					page: '/pagesA/message/comment'
				}, {
					title: '通知',
					icon: 'https://www.innovationgloble.com/wxs/img/wx/notify.png',
					page: '/pagesA/message/notify'
				}, {
					title: '粉丝',
					icon: 'https://www.innovationgloble.com/wxs/img/wx/fans.png',
					page: '/pagesA/message/fans'
				}],
				sysNum: '0',
				commitNum: '0'
			}
		},
		onShow() {
			//检测登录状态
			this.checkLogin();
			this.getMsgMap();
		},
		computed: {
			...mapGetters('chatStore', ['histChatList']),
			...mapState('userStore', ['userInfo', 'hasLogin','isLine']),
			...mapState('chatStore', ['hasSysMessage']),
			showTips() {
				return item => item.imMessage.readStatus == 0 && item.imMessage.fromId !== this.userInfo.userId;
			},
			displayLastMsg() {
				return msg => {
					try {
						let temp = JSON.parse(msg)
						if (temp.type) {
							if (temp.type == 'project') {
								return '[资源]'
							} else if (temp.type == 'demand') {
								return '[资源]'
							} else if (temp.type == 'service') {
								return '[资源]'
							} else if (temp.type == 'talent') {
								return '[资源]'
							} else if (temp.type == 'activity') {
								return '[资源]'
							} else if (temp.type == 'image') {
								return '[图片]'
							} else if (temp.type == 'text') {
								return temp.value;
							}else if (temp.type == 'file') {
								return '[文件]';
							}
							return '未知类型';
						} else {
							if (typeof(msg) === 'string') {
								if (msg.indexOf('<img') !== -1) {
									return '图片'
								}
								return msg;
							}
							return '未知类型';
						}

					} catch (e) {
						if (typeof(msg) === 'string') {
							if (msg.indexOf('<img') !== -1) {
								return '图片'
							}
							return msg;
						}
						return '未知类型';
					}


				}
			}
		},
		methods: {
			...mapMutations('chatStore', ['setCurrentPerson', 'setChatLogin']),
			...mapActions('chatStore', ['get_chat_contact_list']),
			//删除第一位为逗号
			handleComma(val) {
				if (val && val.indexOf(',') === 0) {
					return val.substr(1)
				} else {
					return val
				}
			},
			goSearch() {
				console.log(111)
				uni.navigateTo({
					url: '/pagesA/search/search'
				})
			},
			actionClick(item) {
				console.log('item', item.userId);
				if(!permissionJudge('web:phonebook:save')){
					uni.showToast({
						title:'暂无权限',
						icon:'none'
					})
					return false
				}
				this.savePhoneBookUser(item.userId);
			},
			change(open) {
				console.log('当前开启状态：' + open)
			},
			savePhoneBookUser(linkUserId) {
				const params = {
					linkUserId,
				}
				this.$request.post({
					url: 'phonebook/save',
					data: params,
				}).then(info => {
					uni.showToast({
						title: info
					});
					console.log('info', info)
				}, res => {});
			},
			goAsk() {
				uni.navigateTo({
					url: "/pagesA/message/ask"
				});
			},
			toAllCommentsList() {
				uni.navigateTo({
					url: "/pagesA/message/comment"
				});
			},
			goContactList() {
				if(!permissionJudge('web:phonebook:list')){
					uni.showToast({
						title:'暂无权限',
						icon:'none'
					})
					return false
				}
				uni.navigateTo({
					url: "/pagesB/contact-list/contact-list"
				})
			},
			goNotify() {
				uni.navigateTo({
					url: "/pagesA/message/notify"
				});
			},
			goEnters(item) {
				uni.navigateTo({
					url: item.page
				});
			},
			goLogin() {
				uni.navigateTo({
					url: '/pagesA/login/login'
				})
			},
			// //通知
			// loadMessage() {
			// 	const params = {
			// 		pageSize: 10,
			// 		pageIndex: 1,
			// 		messageType: 1
			// 	}
			// 	this.$request.get({
			// 		url: 'sysMessage/list',
			// 		data: params,
			// 	}).then(info => {
			// 		console.log('info', info)
			// 	}, res => {});
			// },
			//获取未读信息
			getMsgMap() {
				this.$request.get({
					url: 'sysMessage/getMsgMap',
				}).then(info => {
					console.log('info', info)
					for (let k of info) {
						if (k.label == '通知') {
							this.sysNum = k.value?k.value:0
						}
						if (k.label == '评论') {
							this.commitNum = k.value?k.value:0
						}
					}
					//隐藏小圆点
					if(parseFloat(this.sysNum)===0 && parseFloat(this.commitNum)===0){
						uni.hideTabBarRedDot({index:2});
					}
				}, res => {});
			},


			checkLogin() {
				try {
					const userInfo = uni.getStorageSync('userInfo');
					if (userInfo) {
						// 获取历史联系人
						this.get_chat_contact_list();

						//连接 聊天服务
						this.checkConnectWS();
						this.setChatLogin(true);
						this.setUserInfo(userInfo);
					} else {
						this.setChatLogin(false);
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			checkConnectWS() {
				getApp().connectWS();
			},
			goChat(item) {
				// const chatLogin = getApp().globalData.chatLogin;
				// if (chatLogin) {

				// }
				this.setCurrentPerson(item);
				uni.navigateTo({
					url: `/pagesA/chat-contactlist/chat?userId=${item.userId}`
				})
			},
			chatTime(time) {
				return chat_time(time);
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		width: 100%;
		min-height: 100vh;
		// background-color: #F5F6F9;
		background-color: #fff;

		.sepline {
			width: 100%;
			background-color: #F5F6F9;
			height: 16upx;
		}

		.invite-no-data {
			background-color: #fff;
			text-align: center;
			margin-top: 180upx;

			image {
				width: 210upx;
				height: 197upx;
				margin: 0 auto;
			}

			.no-data-text {
				font-size: 28upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(72, 107, 157, 1);
				line-height: 30upx;
				text-align: center;
				padding-bottom: 116upx;
				margin-top: 14upx;
			}
		}

		.other-message {
			margin-bottom: 16upx;

			.option-area-item {
				height: 99upx;
				font-size: 26upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(34, 34, 34, 1);
				display: flex;
				justify-content: space-between;
				align-items: center;
				// border-bottom: 1px solid #F2F2F2;
				padding: 0upx 32upx;
				background-color: #fff;

				position: relative;

				.line {
					position: absolute;
					background-color: #F2F2F2;
					height: 2upx;
					bottom: 0;
					left: 80upx;
					right: 30upx;
				}

				.option-area-item-title {
					display: flex;
					align-items: center;
					margin-left: 15upx;
					position: relative;



					.icon {
						width: 42upx;
						height: 42upx;
						object-fit: cover;
						margin-right: 42upx;
					}
				}

				.red_circle {
					position: absolute;
					top: 30upx;
					right: 76upx;
					width: 40upx;
					height: 40upx;
					-webkit-border-radius: 50%;
					border-radius: 50%;
					background-color: #FE596A;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}


				.more_quan {
					font-size: 26upx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: rgba(255, 255, 255, 1);
				}

				.more_quan>.icon {
					vertical-align: middle;
				}
			}
		}



		.search-box-wrapper {
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: #FFFFFF;

			.input-box {
				display: flex;
				flex-direction: row;
				align-items: center;
				flex: 1;
				border-radius: 8upx;
				box-sizing: border-box;
				background-color: #F5F5F5;
				position: relative;
				margin-bottom: 22upx;
				overflow: hidden;
				margin: 20upx 32upx;
				padding: 0 20upx;
				box-sizing: border-box;

				.uni-input {
					font-size: 28upx;
					background-color: #F5F5F5;
					color: #A3A3A3;
					height: 75upx;

				}

				.search-icon {
					width: 32upx;
					height: 32upx;
				}
			}
		}

		.quick-enters {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 31px 15px 23px 15px;
			margin: 0 10px;
			border-bottom: 1px solid #F9F9F9;

			.quick-item {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.quick-item-desc {
				margin-top: 16upx;
				font-size: 24upx;
				color: #CCCCCC;
			}

			.quick-item-title {
				margin-top: 20upx;
				font-size: 28upx;
				color: rgba(51, 51, 51, 1);
				font-weight: 700;
			}

			.quick-item-image {
				width: 98upx;
				height: 98upx;
			}
		}

		.nodata {
			display: flex;
			min-height: 100vh;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.tip {
				color: #666666;
				font-size: 26upx;
				margin: 30upx 0;
			}

			.img {
				object-fit: contain;
				height: 288upx;
				width: 374upx;
			}

			.btn {
				width: 145upx;
				height: 69upx;
				background: rgba(42, 125, 250, 1);
				border-radius: 4upx;
				text-align: center;
				line-height: 69upx;
				color: #fff;
			}
		}

	}

	.chat-item {
		width: 100%;
		height: 144upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;

		position: relative;

		.time {
			// position: absolute;
			// top: 22upx;
			// right: 20upx;
			flex: 1;
			text-align: right;
			font-size: 24upx;
			font-weight: 400;
			color: rgba(135, 139, 153, 1);
		}

		.red_circle {
			position: absolute;
			top: 80upx;
			right: 20upx;
			width: 20upx;
			height: 20upx;
			border-radius: 50%;
			background-color: #FE596A;
		}
	}

	.user-info {
		flex: 1;

		.name-box {
			display: flex;
			flex-direction: row;
			align-items: center;

			.name {
				font-size: 30upx;
				color: #444444;
				font-weight: bold;

				word-break: break-word; //换行模式
				overflow: hidden;
				text-overflow: ellipsis; //修剪文字
				display: -webkit-box;
				-webkit-line-clamp: 1; //此处为上限行数
				-webkit-box-orient: vertical;
				max-width: 50%;
			}

			.identity {
				margin-left: 10upx;
				font-size: 20rpx;
				color: #B6890E;
				background: rgba(255, 237, 187, 0.85);
				border-radius: 8px;
				padding: 2rpx 14rpx;
			}
		}

	}

	.bot-line {
		position: absolute;
		bottom: 0;
		height: 2upx;
		background-color: #F5F5F5;
		left: 124upx;
		right: 0upx;
	}

	.content {
		display: flex;
		justify-content: space-between;

		.content-text {
			font-size: 26upx;
			color: #888787;
			word-break: break-word; //换行模式
			overflow: hidden;
			text-overflow: ellipsis; //修剪文字
			display: -webkit-box;
			-webkit-line-clamp: 1; //此处为上限行数
			-webkit-box-orient: vertical;
			width: 500upx;
		}

		.un-read-num {
			width: 36upx;
			height: 36upx;
			background: rgba(254, 89, 106, 1);
			font-size: 22upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			line-height: 40upx;
			border-radius: 50%;
			text-align: center;
		}
	}

	.avatar {
		width: 84upx;
		height: 84upx;
		border-radius: 50%;
		background-color: #F9F9F9;
		margin-right: 20upx;
	}
</style>
